<template>
  <div class="" style="margin: 0 6%">
    <div
      style="
        width: 20%;
        border-radius: 50%;
        border: 2px solid #f2d070;
        margin-left: 10px;
      "
    >
      <img
        v-if="this.user.avatarUrl"
        :src="this.user.avatarUrl"
        alt=""
        style="width: 100%; border-radius: 50%; display: block"
      />
      <img
        v-else
        src="@/assets/logo1.png"
        alt=""
        style="width: 100%; border-radius: 50%; display: block"
      />
    </div>

    <!-- 详细信息 -->
    <div style="width: 100%; margin-top: 20px">
      <el-descriptions
        :column="3"
        border
        size="medium"
        :labelStyle="{
          backgroundColor: '#fff',
          fontSize: '16px',
          width: '16%'
        }"
        :contentStyle="{ backgroundColor: '#fff', fontSize: '16px' }"
      >
        <el-descriptions-item :span="3">
          <template slot="label">
            <i class="el-icon-yonghuming"></i>
            用户名
          </template>
          {{ this.user.no }}
        </el-descriptions-item>
        <el-descriptions-item :span="3">
          <template slot="label">
            <i class="el-icon-nicheng"></i>
            昵称
          </template>
          {{ this.user.name }}
        </el-descriptions-item>
        <el-descriptions-item :span="1">
          <template slot="label">
            <i class="el-icon-age"></i>
            年龄
          </template>
          {{ this.user.age }}
        </el-descriptions-item>
        <el-descriptions-item :span="1">
          <template slot="label">
            <i class="el-icon-xingbie"></i>
            性别
          </template>
          <el-tag
            :type="this.user.sex === '男' ? 'primary' : 'danger'"
            disable-transitions
            ><i
              :class="
                this.user.sex === '男' ? 'el-icon-male' : 'el-icon-female'
              "
            ></i
            >{{ this.user.sex === '男' ? '男' : '女' }}</el-tag
          >
        </el-descriptions-item>
        <el-descriptions-item :span="1">
          <template slot="label">
            <i class="el-icon-role"></i>
            角色
          </template>
          <el-tag
            :type="this.user.roleId === '0' ? 'danger' : 'success'"
            disable-transitions
            >{{ this.user.roleId === '0' ? '管理员' : '用户' }}</el-tag
          >
        </el-descriptions-item>
        <el-descriptions-item :span="3">
          <template slot="label">
            <i class="el-icon-phone"></i>
            电话
          </template>
          {{ this.user.phone }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PersonMessage',
  data() {
    return {
      user: JSON.parse(localStorage.getItem('curUser')) || {}
    }
  },
  methods: {}
}
</script>

<style scoped></style>
